<template>
  <BasicModal
    @register="register"
    showFooter
    :title="getTitle + '模型'"
    width="888px"
    :minHeight="300"
    @ok="handleSubmit"
    @cancel="handleCancel"
    :class="prefixCls"
  >
    <Spin v-if="!loaded">
      <HEmpty class="mt-20" />
    </Spin>
    <div class="py-1 px-3" v-else>
      <div class="basic">
        <HFormTitle text="基础信息" class="pb-3.75 mb-3.75 title" />
        <BasicForm @register="registerForm" />
      </div>
      <div class="database mt-5">
        <HFormTitle text="数据源定义" class="pb-3.75 mb-3.75 title" />
        <BasicForm @register="registerData" />
      </div>
      <div class="database mt-5">
        <HFormTitle text="数据跟踪定义" class="pb-3.75 mb-3.75 title" />
        <BasicForm @register="registerDataFlow" />
      </div>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup name="BasicInfoModal">
  import { ref, unref, computed } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { Spin } from 'ant-design-vue';
  import HEmpty from '/@/components/HEmpty/index.vue';
  import HFormTitle from '/@/components/HFormTitle';

  import { useMessage } from '/@/hooks/web/useMessage';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { basicSchemaFn, dataSchema, dataFlowSchema } from './basic.data';
  import { sleep } from '/@/utils';

  const emit = defineEmits(['register', 'success', 'cancel']);
  const { prefixCls } = useDesign('BasicInfoModal');
  const { createMessage } = useMessage();
  const isUpdate = ref(false);
  const loaded = ref(false);
  const infoRef = ref<Indexable>({});
  const getTitle = computed(() => (isUpdate.value ? '编辑' : '新增'));

  const [registerForm, { validate }] = useForm({
    rowProps: { gutter: 0 },
    labelWidth: 90,
    baseColProps: { lg: 12, md: 24 },
    schemas: basicSchemaFn,
    showActionButtonGroup: false,
  });

  const [registerData, { validate: validData }] = useForm({
    rowProps: { gutter: 0 },
    labelWidth: 90,
    baseColProps: { lg: 12, md: 24 },
    schemas: dataSchema,
    showActionButtonGroup: false,
  });
  const [registerDataFlow, { validate: validFlowData }] = useForm({
    rowProps: { gutter: 0 },
    labelWidth: 90,
    baseColProps: { lg: 12, md: 24 },
    schemas: dataFlowSchema,
    showActionButtonGroup: false,
  });

  const [register, { closeModal }] = useModalInner(async () => {
    await sleep(50);
    loaded.value = true;
  });

  async function handleSubmit() {
    const data = await validate();
    const dataInfo = await validData();
    data.dataInfo = dataInfo;
    const modifyLogConfig = await validFlowData();
    data.formDesignInfo = Object.assign({}, infoRef.value.formDesignInfo, {
      modifyLogConfig,
    });

    emit('success', {
      isUpdate: unref(isUpdate),
      data,
    });
    closeModal();

    isUpdate.value && createMessage.success('操作成功');
  }
  function handleCancel() {
    closeModal();
    emit('cancel');
  }
</script>
<style lang="less" scoped>
  .title {
    border-bottom: 1px solid #f5f6f7;
  }
</style>
